<template>
	<view class="upload_container">
		<view class="upload_image" v-for="(path,index) in imgList" :key="index">
			<image :src="path" mode="aspectFill" @click="previewImage(path,imgList)" />
			<icon v-if="showType===0" class="iconfont" color="#626262" type="clear" size="24" @tap="deleteImg(index)" />
			<view v-else @tap="chooseImg(index)" class="reUpload">
				<text>重新上传</text>
			</view>
		</view>
		<view class="uploadBtn" @tap="chooseImg" v-if="imgList.length < 9 && showType===0">
			<u-icon name="plus"></u-icon>
			<view class="text">{{content}}</view>
		</view>
	</view>
</template>

<script>
	const baseUrl = process.env.NODE_ENV === 'development' ? 'https://gatewaytest.1-1dr.com' : 'https://gateway.1-1dr.com';
	export default {
		name: "hy-upload",
		props: {
			imgList: {
				type: Array,
				default: []
			},
			showType: {
				type: Number,
				default: 0
			},
			content: {
				type: String,
				default: '选择图片'
			}
		},
		data() {
			return {

			};
		},
		methods: {
			// 选择图片
			chooseImg(index) {
				var that = this;
				var pics = [];
				if (this.imgList.length < 9) {
					uni.chooseImage({
						count: this.type === 0 ? (9 - this.imgList.length) : 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['album', 'camera'],
						success: (res) => {
							var imgs = res.tempFilePaths;
							for (var i = 0; i < imgs.length; i++) {
								pics.push(imgs[i])
							}
							uni.showLoading('加载中');
							that.uploadimg({
								idx: index,
								url: '/api/file/upload',
								path: pics,
							})
						}
					});
				} else {
					uni.showToast({
						title: "最多九张图片哦!",
						icon: "none"
					});
				}
			},
			// 删除图片
			deleteImg(index) {
				this.$emit('deleteImg', index)
			},
			uploadimg(data) {
				uni.showLoading('加载中');
				var that = this,
					i = data.i ? data.i : 0,
					success = data.success ? data.success : 0,
					fail = data.fail ? data.fail : 0;
				uni.uploadFile({
					url: baseUrl + data.url,
					filePath: data.path[i],
					name: 'file',
					success: (resp) => {
						uni.hideLoading();
						success++;
						var str = resp.data //返回的结果，可能不同项目结果不一样
						var pic = JSON.parse(str);
						this.$emit('uploadImg', {
							showType: this.showType,
							url: pic.data[0].url,
							idx: data.idx
						})
					},
					fail: (res) => {
						fail++;
						console.log('fail:' + i + "fail:" + fail);
					},
					complete: () => {
						i++;
						if (i == data.path.length) { //当图片传完时，停止调用
							that.uploadImg = false;
							console.log('执行完毕');
							console.log('成功：' + success + " 失败：" + fail);
						} else { //若图片还没有传完，则继续调用函数
							data.i = i;
							data.success = success;
							data.fail = fail;
							that.uploadimg(data); //递归，回调自己
						}
					}
				});
			},
			// 查看图片
			previewImage(url, imgs) {
				uni.previewImage({
					current: url,
					urls: imgs
				})
			}
		}
	}
</script>

<style lang="scss">
	.upload_container {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 0 10rpx;

		.uploadBtn {
			width: 200rpx;
			height: 200rpx;
			background-color: $bg-color-white;
			font-size: 40rpx;
			color: #D2D2D2;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border: 1rpx solid #D2D2D2;
			margin-bottom: 25rpx;

			.text {
				margin-top: 10rpx;
				font-size: 25rpx;
			}
		}

		.upload_image {
			display: flex;
			align-items: center;
			margin-right: 25rpx;
			position: relative;
			margin-bottom: 25rpx;

			&:nth-child(4n) {
				margin-right: 0;
			}

			.reUpload {
				position: absolute;
				top: 0;
				right: 0;
				background-color: #07C160;
				font-size: 20rpx;
				border-radius: 0 0 0 7rpx;
				padding: 10rpx;
				color: #fff;
			}

			.iconfont {
				position: absolute;
				right: -20rpx;
				top: -20rpx;
				color: #e03440;
				opacity: 0.8;
				z-index: 1;
			}

			image {
				width: 200rpx;
				height: 200rpx;
			}
		}
	}
</style>
